<template>
  <div class="page store-details">
    <div class="scroll-view">
      <!-- <customHeader
        middleTitle="门店详情"
        v-if="data.authEditShop&&(String(data.optionType) =='0')"
        rightTitle="编辑"
        @rightCallBack="opertation"
        @leftCallBack="handleBack"
      /> -->
      <customHeader
        middleTitle="门店详情"
        v-if="data.authEditShop&&(String(data.optionType) =='0')"
        @leftCallBack="handleBack"
      />
      <customHeader middleTitle="门店详情" v-else @leftCallBack="handleBack" />

      <div class="page-body">
        <div class="reject-reason" v-show="data.auditIsNotPass">{{data.auditDesc}}</div>

        <ul class="detail-info">
          <div class="head-info">
            <div class="left">
              <img :src="data.headImg" alt />
            </div>
            <div class="right">
              <div class="store-name">{{data.storeName}}</div>
              <div class="dish-type">{{data.dishType}}</div>
            </div>
          </div>
          <li>
            <span>门店状态</span>
            <div :class="data.auditStatusText.class">{{data.auditStatusText.val}}</div>
          </li>
          <li>
            <span>门店id</span>
            <div @click="doCopy(data.shopId)">{{data.shopId}}</div>
          </li>
        </ul>
        <div class="title-bar">收款方式</div>

        <div class="pay-way" @click.stop="ToAccountManage">
          <ul class="pay-way-list">
            <li :class="data.alipayState?'':'unopen'">
              <p class="top pay-zfb zhk-detail_zfb"></p>
              <p class="bottom">支付宝</p>
            </li>
            <li :class="data.wxPayState?'':'unopen'">
              <p class="top pay-wx zhk-detail_wx"></p>
              <p class="bottom">微信支付</p>
            </li>
            <li :class="data.cloudPayState?'':'unopen'">
              <p class="top pay-ysf zhk-detail_ysf"></p>
              <p class="bottom">云闪付</p>
            </li>
            <!-- <li>
              <p class="top pay-xj zhk-detail_cash"></p>
              <p class="bottom">现金收款</p>
            </li> -->
            <li :class="data.unionPayState?'':'unopen'">
              <p class="top pay-yl zhk-detail_yl"></p>
              <p class="bottom">POS刷卡</p>
            </li>
          </ul>
        </div>
        <ul class="detail-info">
          <li>
            <span>门店电话</span>
            <div>{{data.contactNumber}}</div>
          </li>
          <li>
            <span>门店地址</span>
            <div>{{data.address}}</div>
          </li>
          <li>
            <span>门店简介</span>
            <div>{{data.desc}}</div>
          </li>
          <li>
            <span>邀请码</span>
            <div>{{data.invitationCode}}</div>
          </li>
          <li>
            <span>门店区域</span>
            <div>{{data.regionName?data.regionName:"未划分"}}</div>
          </li>
        </ul>
        <div class="title-bar">门店照片</div>
        <div class="img-scroll">
          <ul class="store-img-list">
            <li v-for="(item,index) in data.storeImgList" :key="index">
              <img :src="item" alt @click="showImg(index)" />
            </li>
          </ul>
          <div class="nodata" v-if="data.storeImgList.length===0">暂无图片</div>
        </div>

        <div class="title-bar">商家资质</div>
        <ul class="detail-info">
          <li>
            <span>商户类型</span>
            <div>{{data.shopTypeTitle}}</div>
          </li>
          <li v-if="data.shopType!=='01'">
            <span>公司全称</span>
            <div>{{data.companyName}}</div>
          </li>
          <li v-if="data.shopType!=='01'">
            <span>营业执照注册地址</span>
            <div>{{data.licenseRegisterAddress}}</div>
          </li>
          <li v-if="data.shopType!=='01'">
            <span>营业执照注册号</span>
            <div>{{data.businessLicense}}</div>
          </li>
          <li v-if="data.shopType!=='01'">
            <span>营业执照有效期</span>
            <div>{{data.licenseExpireStart&&data.licenseExpire?(data.licenseExpireStart+"至"+expireFormate(data.licenseExpireStart,data.licenseExpire)):''}}</div>
          </li>
          <li v-if="data.shopType!=='01'">
            <span>营业执照照片</span>
            <div>
              <img :src="data.businessLicenseImage" />
            </div>
          </li>
          <li>
            <span v-if="data.shopType==='01'">申请人姓名</span>
            <span v-if="data.shopType==='02'">经营者姓名</span>
            <span v-if="data.shopType==='03'">法人姓名</span>
            <div>{{data.businessOperatorName}}</div>
          </li>
          <li>
            <span>身份证号码</span>
            <div>{{data.idcard}}</div>
          </li>
          <li>
            <span>身份证有效期</span>
            <div>{{data.idcardValidStartDate && data.idcardValidEndDate?'**** 至 ****':''}}</div>
          </li>
          <li>
            <span>身份证照片</span>
            <div>
              <img :src="data.idcardImageFront" alt />
              <img :src="data.idcardImageBackground" alt />
            </div>
          </li>
        </ul>

        <div class="kb-info" v-show="data.kbBindState">
          <div class="title-bar">关联口碑门店信息</div>
          <ul class="detail-info">
            <li>
              <span>口碑门店名称</span>
              <div>{{data.kbShopName}}</div>
            </li>
            <li>
              <span>口碑门店ID</span>
              <div>{{data.kbShopId}}</div>
            </li>
            <li>
              <span>状态</span>
              <div>{{data.kbStauts}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast, MessageBox } from "mint-ui";
import jsBridge from "../../tools/jsBridge";
import config from "../../base/profile/config.json";
import jsAuthority from "../../tools/jsAuthority.js";
import shopService from "../../js/shopService.js";
import moment from "moment";
import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);
export default {
  name: "storeDetails",
  data() {
    return {
      shopId: "",
      dictAuditStatus: {//门店状态
        "1": { class: "green", val: "审批中" },
        "2": { class: "green", val: "变更审批中" },
        "3": { class: "red", val: "审批驳回" },
        "4": { class: "red", val: "变更审批驳回" },
        "5": { class: "grey", val: "审批通过" },
        "6": { class: "grey", val: "变更审批通过" }
      },
      data: {
        authEditShop: false,
        optionType: 1,
        storeName: "",
        shopLogo: "",
        dishType: "",
        storeImgList: [],
        shopId: "",
        contactNumber: "",
        address: "",
        desc: "",
        kbBindState: false,
        kbShopName: "",
        kbShopId: "",
        kbStauts: "正常",
        alipayState: false,
        wxPayState: false,
        unionPayState: false,
        auditStatus: null,
        auditStatusText: "",
        auditIsNotPass: false,
        auditDesc: "",
        shopType: "",
        shopTypeTitle: "",
        businessLicense: "",
        businessLicenseImage: "",
        idcard: "",
        idcardImageFront: "",
        idcardImageBackground: "",
        invitationCode: "",
        companyName: "",
        licenseExpireStart: "",
        licenseExpire: "",
        businessOperatorName: "",
      }
    };
  },
  methods: {
    doCopy(content) {
      if(!content){
        return;
      }
      this.$copyText(content).then(
        e => {
          Toast("复制成功");
        },
        e => {
          Toast("您的系统版本过低,请长按手动复制");
        }
      );
    },
    //跳转收款账户管理
    ToAccountManage() {
      this.$router.push({
        path: "/storeManage/gatheringManage",
        query: { shopId: this.shopId }
      });
    },
    changeMoment(date) {
      return moment(date).format('YYYY-MM-DD')
    },
    //返回
    handleBack() {
      var query = this.$route.query;

      var from = query.from;
      var fromMy = (from && from == "my");
      if (fromMy) {
        jsBridge.closeWindow();
      } else {
        this.$router.back();
      }
    },
    expireFormate(start, deal) {
      const startDate = moment(start).format('YYYY-MM-DD');
      if (startDate && deal) {
        if (deal == '29991231') {
          return '长期'
        } else {
          return moment(startDate.replace(/-/g, "/")).add(deal, 'years').format('YYYY-MM-DD');
        }
      }
      return
    },
    //编辑
    opertation() {
      const shopId = this.shopId;
      const delFlag = this.$route.query.delFlag;
      // this.$router.push({ path: "/SMSVerification2", query: { linkToUrl:"editStore",shopId:shopId,delFlag: delFlag}});
      // return;
      this.verify(shopId, delFlag);
    },
    //脱敏校验
    verify(shopId, delFlag) {
      const url = `app/shop/isVerify.do?shopId=${this.shopId}`;
      this.ajax({
        url: url,
        type: "get",
        controlLoading: true
      })
        .then(res => {
          if (res.success == true) {
            this.$router.push({ path: "/storeManage/editStore", query: { id: shopId, type: 2, delFlag: delFlag } });
          } else {
            this.$router.push({ path: "/SMSVerification2", query: { linkToUrl: "/storeManage/editStore", shopId: shopId, type: 2, delFlag: delFlag } });
          }
        })
        .catch(err => {

        });
    },
    showImg: function (index) {
      try {
        jsBridge.viewPicture(
          { files: this.data.storeImgList, current: index },
          function (params) {

          }
        );
      } catch (e) {
        Toast("预览失败");
      }
    },
    bindData(data) {
      //绑定页面数据
      this.data = data;
      this.shopId = data.shopId;
      //处理日期
      this.data.licenseExpireStart = this.changeMoment(this.data.licenseExpireStart);
      if (data.branchShopName != "" && data.branchShopName.length > 0) {
        this.data.storeName = data.mainShopName + "(" + data.branchShopName + ")";
      } else {
        this.data.storeName = data.mainShopName;
      }
      //处理显示logo
      if (data.mainImage && data.mainImage.length > 0) {
        this.data.shopLogo = data.mainImage[0];
      }
      var dishType = data.categoryLevel1;
      if (data.categoryLevel2) {
        dishType = dishType + "/" + data.categoryLevel2;
      }
      if (data.categoryLevel3) {
        dishType = dishType + "/" + data.categoryLevel3;
      }
      this.data.dishType = dishType;

      //处理显示其他图放在一个list中
      var imgList = data.mainImage;
      if (!imgList) {
        imgList = [];
      }
      if (data.checkoutImage && data.checkoutImage[0]) {
        imgList = imgList.concat(data.checkoutImage);
      }
      if (data.innerImage) {
        imgList = imgList.concat(data.innerImage);
      }
      imgList = imgList.map((item) => {
        return CommonUtil.imgUrlFormate(item, config.previewUrlPrefix);
      });

      this.data.storeImgList = imgList;
      this.data.businessLicenseImage = CommonUtil.imgUrlFormate(this.data.businessLicenseImage, config.previewUrlPrefix);
      //收款渠道
      this.data.alipayState = data.alipayPayStatus === "1";
      this.data.wxPayState = data.wxPayStatus === "1";
      this.data.unionPayState = data.unionpay === "1";
      this.data.cloudPayState = data.cloudPayStatus === "1";
      //关联支付宝判断
      if (data.kbShopId && data.kbShopId != "") {
        this.data.kbBindState = true;
        this.data.kbStauts = data.alipayPayStatus === "1" ? "正常" : "异常";
      }
      this.data.headImg= CommonUtil.imgUrlFormate(data.mainImage[0], config.previewUrlPrefix);
      //审核状态
      this.data.auditStatusText = this.dictAuditStatus[data.auditStatus];;
      //this.data.auditIsNotPass = shopService.getAuditIsNoPass(data.auditStatus);
      //审核区域
      this.data.shopTypeTitle = shopService.getShopTypeTitle(data.shopType);
      var idcardImage = data.idcardImage;
      if (idcardImage) {
        this.data.idcardImageFront = CommonUtil.imgUrlFormate(idcardImage["A"], config.previewUrlPrefix);
        this.data.idcardImageBackground = CommonUtil.imgUrlFormate(idcardImage["B"], config.previewUrlPrefix);
      }
      //===审核通过可修改修改
      var editFlag = shopService.getAuditIsEditShop(data.auditStatus);

      if (editFlag) {
        const _this = this;
        jsAuthority.checkedSuccess(function () {
          _this.data.authEditShop = jsAuthority.checked(
            "app.me.shopmanage.detail.edit"
          );
        });
      }
    }
  },
  created: function () {
    this.shopId = this.$route.query.id;
    this.ajax({
      url: `/newapp/shop/getShopDetail.do?shopId=${this.shopId}&desensitization=true1`,
      type: "get",
      controlLoading: true
    })
      .then((res) => {
        if (res.success) {
          var data = res.resultObject;
          if (data != null && JSON.stringify(data) != "{}") {
            this.bindData(data);
          } else {
            MessageBox.alert("门店信息不存在").then(action => {
              this.$router.push({
                path: "/storeManage",
              });
            });
          }
        }
      })
      .catch(function (err) {

      });
  },
  components: {
    customHeader
  }
};
</script>
<style lang='scss' scoped>
@import "storeDetails";
</style>
